<template>
	<y-base-page title=" ">
		<view class="content">
			<view class="phone">
				<input v-model="phone" type="number" placeholder="手机号码">
			</view>
			<view class="code">
				<input v-model="code" type="text" placeholder="验证码或密码">
				<!-- <span class="codeBtn" @click.stop="getVerificationCode">{{btnWord}}</span> -->
			</view>

			<view class="loginBtn" @click="handleLogin">登录</view>
		</view>
	</y-base-page>
</template>

<script>
import { mpwxForceLogin } from '@/api/user.js';
import util from '@/lib/util.js';
export default{
	data() {
		return {
			phone: '',
			code: '',
			btnWord: "获取验证码",
			flag: true,
			minute: 60,
			timer: null
		}
	},
	onShow() {
			this.code = '';
			this.btnWord = "获取验证码";
	},
	methods:{
		checkPhone() {
			if (!/^1[3456789]\d{9}$/.test(this.phone)) {
				return false;
			} else {
				return true;
			}
		},
		getVerificationCode(){
			let _that = this;

			if ( !_that.flag ) return;

			if (_that.phone == "") {
			uni.showToast({
				title: '请输入正确的手机号码',
				icon: 'none'
			});
			} else {
			if (_that.checkPhone()) {

				sendPhoneCode(_that.phone).then(res => {
				if (res.data.code == 200 || res.data.code == 201) {
					_that.code = res.data.data;
					_that.btnWord = "已发送";
					uni.showToast({
					title: '发送成功'
					});
					_that.minute = 60;
					_that.flag = false;
					_that.timer = setInterval(() => {
					if (_that.minute == 0) {
						_that.btnWord = "重新发送";
						_that.flag = true;
						clearInterval(this.timer);
					} else {
						_that.minute--;
						_that.btnWord = "剩 " + _that.minute + " 秒";
					}
					}, 1000);
				} else {
					_that.btnWord = "发送失败";
				}
				});

			} else {
				uni.showToast({
				title: '请输入正确的手机号码',
				icon: 'none'
				});
			}
			}
		},
		async handleLogin () {
			let params = {
			mobile: this.phone,
			password: this.code
			};
			if (this.phone == ''||!this.checkPhone()) {
			uni.showToast({
				title: '请输入正确的手机号码',
				icon: 'none'
			});
			return
			}
			if (this.code == '') {
			uni.showToast({
				title: '请输入验证码或密码',
				icon: 'none'
			});
			return
			}
			uni.showLoading({title:'加载中'});
			let res =  await mpwxForceLogin(JSON.stringify(params));
			uni.getSystemInfo({
				success:function(e){
					res.data.data.devAgent = e.system.split(' ')[0];
				}
			});
			const {token,userId,devAgent,wxNickname,mobile,avatarUrl} = res.data.data;
			// 轻陪请求头部到本地存储
			let requestHeader = {
				Authorization: `Bearer ${token}`, //token
				userId: userId,
				devAgent:devAgent,
			}
			uni.setStorage({
				key:'requestHeader',
				data:requestHeader
			})
			let userInfo = {
				wxNickname:wxNickname,
				userMobile: mobile,
				userId: userId,
				avatarUrl:avatarUrl
			}
			uni.setStorage({
				key:'userInfo',
				data:userInfo
			})
			const url = util.getPageOptions().targetUrl;
			if(url){
				uni.reLaunch({
					url:decodeURIComponent(url)
				})
			}else{
				uni.reLaunch({
					url:'../home/home'
				})
			}
					
			uni.hideLoading();
		}
	}
}
</script>

<style lang="scss" scoped>
  .phone {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 50px 15px 0;
    padding: 20px 30px;
    background: #fff;
    input {
      flex: 1;
      /*height: 30px;*/
      padding: 5px 8px;
      font-size: 15px;
      background: #F5F8FC;
    }
  }

  .code {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 15px;
    padding: 20px 30px;
    background: #fff;
    input {
      flex: 1;
      /*height: 30px;*/
      padding: 5px 8px;
      font-size: 15px;
      background: #F5F8FC;
    }
    .codeBtn {
      margin-left: 12px;
      display: inline-block;
      flex: 0 0 90px;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #BF375A;
      border: 1px solid #BF375A;
      border-radius: 3px;
    }
  }

  .loginBtn {
    box-sizing: border-box;
    margin: 100px 30px 20px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: #BF375A;
    border: 1px solid #BF375A;
    border-radius: 45px;
  }
</style>
